<template>

  <div id="app">

    <div style="margin-bottom: 20px;margin-top: 20px">
      <el-row>
          <span>
                  订单号：
                  <el-input
                    style="width: 15%"
                    v-model="order.id"
                    placeholder="请输入订单号:"
                    clearable>
                  </el-input>
          </span>
          <span>
                  客户名称：
                  <el-input
                    style="width: 15%"
                    v-model="order.customerName"
                    placeholder="请输入客户名称:"
                    clearable>
                  </el-input>
          </span>
          <span>
                  出发城市：
                  <el-input
                    style="width: 15%"
                    v-model="order.departureCity"
                    placeholder="请输入出发城市:"
                    clearable>
                  </el-input>
          </span>
          <span style="margin-right: 10px">
                  目的城市：
                  <el-input
                    style="width: 15%"
                    v-model="order.destinationCity"
                    placeholder="请输入目的城市:"
                    clearable>
                  </el-input>
          </span>
        <!--    搜索框-->
        <el-button type="primary" icon="el-icon-search" @click="findOrdersByPage">搜索</el-button>
      </el-row>
    </div>
    <el-divider></el-divider>

    <div style="margin-top: 20px;margin-bottom: 20px;">
      <i class="el-icon-circle-plus" style="margin-right: 10px"><el-link :underline="false" style="font-size: large" href="/order/add#/order/add">新增</el-link></i>
<!--      <i class="el-icon-remove" style="margin-right: 10px"><el-link :underline="false" style="font-size: large" @click="deleteById">删除</el-link></i>-->
      <el-popover
        placement="top"
        width="160"
        v-model="visible">
        <p>确定删除该数据吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="visible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="deleteById">确定</el-button>
        </div>
        <template slot="reference">
          <i class="el-icon-remove" style="margin-right: 10px"><el-link :underline="false" style="font-size: large">删除</el-link></i>
        </template>
      </el-popover>

      <i class="el-icon-refresh" style="margin-right: 10px"><el-link :underline="false" style="font-size: large" @click="flush">刷新</el-link></i>
      <i class="el-icon-download" style="margin-right: 10px"><el-link :underline="false" style="font-size: large" :href="path">下载</el-link></i>
    </div>

    <el-divider></el-divider>
<!--    订单状态切换查看-->
    <el-row>
    <el-button type="info" round @click="orderStatus=0,findOrdersByPage()">未提交<font color="#8b0000" v-model="total" v-if="total !== 0 && orderStatus === 0">({{total}})</font></el-button>
    <el-button type="info" round @click="orderStatus=1,findOrdersByPage()">已提交<font color="#8b0000" v-model="total" v-if="total != 0 && orderStatus === 1">({{total}})</font></el-button>
    <el-button type="info" round @click="orderStatus=2,findOrdersByPage()">已取消<font color="#8b0000" v-model="total" v-if="total != 0 && orderStatus === 2">({{total}})</font></el-button>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="orders"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="订单编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="orderType"
        label="订单类型"
        width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.orderType == 0">正常</span>
          <span v-if="scope.row.orderType == 1">急单</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="transType"
        label="运输类型"
        width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.transType == 0">火车</span>
          <span v-if="scope.row.transType == 1">航运</span>
          <span v-if="scope.row.transType == 2">海运</span>
          <span v-if="scope.row.transType == 3">汽车</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="customerName"
        label="客户名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="orderTime"
        label="下单时间"
        width="160">
      </el-table-column>
      <el-table-column
        prop="departureCity"
        label="出发城市"
        width="120">
      </el-table-column>
      <el-table-column
        prop="destinationCity"
        label="目的城市"
        width="120">
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="showAll(scope.row.id)">查看</el-button>
          <el-button type="danger" size="small" @click="update(scope.row.id)" v-if="orderStatus==0">修改</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([orders[1], orders[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
    <div class="block" style="margin-top: 5px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
export default {
  name: 'List',
  inject:['reload'],
  data() {
    return {
      //一张订单
      order:{},
      multipleSelection: [],
      orders:[],
      currentPage:1,
      pageSize:2,
      pageSizes:[2,4,6],
      total:2,
      //订单状态
      orderStatus:0,
      ids:[],
      path:'',
      visible:false,
    }
  },
  methods: {

    //刷新
    flush(){
      this.reload();
    },

    //查看所有信息
    showAll(id){
      console.log(id)
      //路由的页面跳转
      this.$router.push({path:'/order/watch',query:{id:id}});
    },

    //修改跳转
    update(id){
      console.log(id)
      //路由的页面跳转
      this.$router.push({path:'/order/update',query:{id:id}});
    },

    //分页查询
    findOrdersByPage(){
      this.$http.get('http://localhost/order/page',{
        params:{
          id:this.order.id,
          customerName:this.order.customerName,
          departureCity:this.order.departureCity,
          destinationCity:this.order.destinationCity,
          orderStatus:this.orderStatus,
          currentPage:this.currentPage,
          pageSize:this.pageSize
        }
      }).then(resp=>{
        if (resp.data.code == 100000){
          this.orders = resp.data.data.list;
          this.total = resp.data.data.total;
          //导出功能
          this.path = "http://localhost/order/down?currentPage="+this.currentPage+"&pageSize="+this.pageSize;
        }
      })
    },
    handleSizeChange(val){
      this.pageSize = val;
      this.findOrdersByPage();
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.findOrdersByPage();
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        });
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    //批量删除
    deleteById(){

      this.visible = false;
      let selection = this.multipleSelection

      for (let i = 0; i < selection.length; i++) {
        this.ids.push(selection[i].id);
      }

      if (this.ids.length == 0){
        this.$message({
          type: 'error',
          message: '请先选择数据！',
        });
        return;
      }

      console.log(this.ids)

      this.$http.post('http://localhost/order/delete',this.ids)
        .then(resp => {
          if (resp.data.code == 100000){
            this.$message({
              type: 'success',
              message: resp.data.msg,
            });
            this.currentPage = 1;
            this.findOrdersByPage();
          }else {
            this.$message({
              type: 'error',
              message: resp.data.msg,
            });
          }
        })

      this.ids.length = 0;


    },

  },
  created() {
    this.findOrdersByPage();
  }
}
</script>

<style scoped>

  #app{
    margin-left: 10px;
  }

</style>
